<template>
	<view class="back">
		<view class="graph">
			<view class="legend">
					<!-- 氧含量 -->
					<view class="legend-item">
							<view class="legend-icon orange"></view>
							<text>氧含量</text>
					</view>
					<!-- 脉率 -->
					<view class="legend-item">
							<view class="legend-icon green"></view>
							<text>脉率</text>
					</view>
					<!-- 脉搏波图 -->
					<view class="legend-item">
							<view class="legend-icon blue"></view>
							<text>脉搏波图</text>
					</view>
			</view>
			<view class="oxygen">
				<qiun-data-charts 
							type="line"
							:opts="opts1"
							:chartData="chartData"
				/>
			</view>
			<view class="pluate-value">
				<qiun-data-charts
				      type="line"
				      :opts="opts2"
				      :chartData="chartData"
				/>
			</view>
			<view class="pluate-rate">
				<qiun-data-charts
				      type="line"
				      :opts="opts3"
				      :chartData="chartData"
				/>
			</view>
		</view>
		<view class="details">
		    <view class="detail-item">
		        <view class="left-align">
		            <text>测试时间：</text>
		        </view>
						<view style="width: 60%;"></view>
		        <view class="right-align">
		            <text>{{ testInfo.testTime }}</text>
		        </view>
		    </view>
		    <view class="underline"></view>
		
		    <view class="detail-item">
		        <view class="left-align">
		            <text>氧化量低于90%时长：</text>
		        </view>
						<view style="width: 60%;"></view>
		        <view class="right-align">
		            <text>{{ testInfo.lowtime }}</text>
		        </view>
		    </view>
		    <view class="underline"></view>
		
		    <view class="detail-item">
		        <view class="left-align">
		            <text>平均氧含量：</text>
		        </view>
						<view style="width: 60%;"></view>
		        <view class="right-align">
		            <text>{{ testInfo.avaOxygen }}</text>
		        </view>
		    </view>
		    <view class="underline"></view>
		
		    <view class="detail-item">
		        <view class="left-align">
		            <text>最低氧含量：</text>
		        </view>
						<view style="width: 60%;"></view>
		        <view class="right-align">
		            <text>{{ testInfo.minValue }}</text>
		        </view>
		    </view>
		    <view class="underline"></view>
		
		    <view class="detail-item">
		        <view class="left-align">
		            <text>平均脉搏：</text>
		        </view>
						<view style="width: 60%;"></view>
		        <view class="right-align">
		            <text>{{ testInfo.avaPlu }}</text>
		        </view>
		    </view>
		    <view class="underline"></view>
		</view>


	</view>
</template>

<script>
	export default {
		name:"oxygen-detail",
		onLoad() {
			
		},
		data() {
			return {
				testInfo: {
						testTime: 11,
						lowtime:10, // 氧化量低于90%时长
						avaOxygen:97,
						minValue:94, // 最低氧含量
						avaPlu:78 ,// 平均脉搏
				},
			  chartData: {},
			  //您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			  opts1: {
			    color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
			    padding: [2,2,2,2],
					height:"20px",
			    dataLabel: false,
			    dataPointShape: false,
			    enableScroll: false,
			    legend: {
						show:false
					},
			    xAxis: {
			      disabled:true
			    },
			    yAxis: {
			      gridType: "dash",
			      dashLength: 1,
						disableGrid:true,
			      data: [
			        {
			          min: 70,
			          max: 100
			        }
			      ],
						splitNumber:2
			    },
					fontSize:9,
			    extra: {
			      line: {
			        type: "curve",
			        width: 1,
			        activeType: "hollow",
			        linearType: "custom",
			        onShadow: true,
			        animation: "horizontal"
			      }
			    }
			  },
				opts2: {
				  color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				  padding: [2,2,2,2],
					height:"20rpx",
				  dataLabel: false,
				  dataPointShape: false,
				  enableScroll: false,
				  legend: {
						show:false
					},
				  xAxis: {
				    disabled:true
				  },
				  yAxis: {
				    gridType: "dash",
				    dashLength: 1,
						disableGrid:true,
				    data: [
				      {
				        min: 30,
				        max: 250
				      }
				    ],
						splitNumber:2,
				  },

					fontSize:9,
				  extra: {
				    line: {
				      type: "curve",
				      width: 1,
				      activeType: "hollow",
				      linearType: "custom",
				      onShadow: true,
				      animation: "horizontal"
				    }
				  }
				},
				opts3: {
				  color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				  padding: [2,2,2,2],
					height:"20px",
				  dataLabel: false,
				  dataPointShape: false,
				  enableScroll: false,
				  legend: {
						show:false
					},
				  xAxis: {
				    disabled:true
				  },
				  yAxis: {
				    gridType: "dash",
				    dashLength: 1,
						disabled:true
				  },
					fontSize:9,
				  extra: {
				    line: {
				      type: "curve",
				      width: 1,
				      activeType: "hollow",
				      linearType: "custom",
				      onShadow: true,
				      animation: "horizontal"
				    }
				  }
				}
			};
		},
		onReady() {
			this.getServerData()
		},
		methods : {
			getServerData() {
			  //模拟从服务器获取数据时的延时
			  setTimeout(() => {
			    //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			    let res = {
			        categories: ["0","1","2","3","4","5","6","7","8","9"],
			        series: [
			          {
			            name: "心电",
			            linearColor: [
			              [
			                0,
			                "#1890FF"
			              ],
			              [
			                0.25,
			                "#00B5FF"
			              ],
			              [
			                0.5,
			                "#00D1ED"
			              ],
			              [
			                0.75,
			                "#00E6BB"
			              ],
			              [
			                1,
			                "#90F489"
			              ]
			            ],
			            setShadow: [
			              3,
			              8,
			              10,
			              "#1890FF"
			            ],
			            data: [150,145,152,145,115,145,150,145,152,145,115]
			          }
			        ]
			      };
			    this.chartData = JSON.parse(JSON.stringify(res));
			  }, 500);
			}
		}
	}
</script>

<style>
.back {
	width: 100vw;
	height: 100vh;
	background: linear-gradient(179.81deg, #17A8E4 0.16%, #94D6E2 29.03%, #FFFFFF 70.53%);
}
.legend {
    display: flex;
    flex-direction: row;
    background-color: #2f8dff;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
		margin-left: 20rpx;
}

.legend-icon {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    margin-right: 10rpx;
}

.orange {
    background-color: orange;
}

.green {
    background-color: green;
}

.blue {
    background-color: blue;
}
.oxygen {
	width: 100%;
	height: 40%;
	background-color: antiquewhite;
}
.pluate-value {
	width: 100%;
	height: 40%;
	background-color: chocolate;
}
.pluate-rate {
	width: 100%;
	height: 20%;
	background-color: lavenderblush;
}
.graph {
	width: 100%;
	height: 60%;
	background-color: skyblue;
}

.details {
    margin-top: 5%;
    background-color: rebeccapurple;
    height: 35%;
    display: flex;
    flex-direction: column;
}

.detail-item {
    display: flex;
		flex-direction: row;
    align-items: center;
    margin-bottom: 10rpx; /* 使用rpx作为间距单位 */
		position: relative;
}

.underline {
    width: calc(100% - 10rpx); /* 为了弥补margin-right带来的影响 */
    height: 1rpx;
    background-color: black;
}

.left-align {
    align-items: center;
		margin-left: 10rpx;
}

.right-align {
    margin-right: 10rpx; /* 将右侧元素推到最右边 */
}




</style>